<!DOCTYPE html>
<thml lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <!-- 新 Bootstrap 核心 CSS 文件 -->
    <link href="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
    <!-- jQuery文件。务必在bootstrap.min.js 之前引入 -->
    <script src="https://cdn.staticfile.org/jquery/2.1.1/jquery.min.js"></script>
    <!-- 最新的 Bootstrap 核心 JavaScript 文件 -->
    <script src="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>
    <link rel="stylesheet"href="./css/iconfont/iconfont.css">
</head>
<body>
<div class="container header">header</div>
<div class="container">
    <!--输入框-->
    <form action="" method="GET" id="box">
        <div class="row">
            <div class="col-md-3">
                <div class="input-group input-group-sm">
                    <span class="input-group-addon">课程名称</span>
                    <input type="text" class="form-control">
                </div>
            </div>
            <div class="col-md-3">
                <div class="input-group input-group-sm">
                    <span class="input-group-addon">状态</span>
                    <input type="text" class="form-control">
                </div>
            </div>
            <div class="col-md-1">
                <button class="btn btn-success btn-sm">查询</button>
            </div>
            <div class="col-md-2 col-md-offset-3">
                <button class="btn btn-primary btn-sm">创建课程</button>
            </div>
        </div>
    </form>
    <div>
        <table class="table table-hover">
             <caption>悬停表格布局</caption>
            <thead>
            <tr>
                <th>id</th>
                <th>课程名称</th>
                <th>价格</th>
                <th>排序</th>
                <th>状态</th>
                <th>操作</th>
            </tr>
            </thead>
            <tbody class="text-center">
<!--            <tr>-->
<!--                <td>1</td>-->
<!--                <td>32个java面试必考点</td>-->
<!--                <td>￥8000</td>-->
<!--                <td>1</td>-->
<!--                <td>-->
<!--                    <span class="iconfont size text-success">&#xe62c;</span>-->
<!--                </td>-->
<!--                <td>-->
<!--                    <button class="btn btn-sm btn-danger">下架</button>-->
<!--                    <button class="btn btn-sm btn-default">营销信息</button>-->
<!--                    <button class="btn btn-sm btn-default">内容管理</button>-->
<!--                </td>-->
<!--            </tr>-->
<!--            <tr>-->
<!--                <td>2</td>-->
<!--                <td>300分钟搞定算法面试</td>-->
<!--                <td>￥198</td>-->
<!--                <td>2</td>-->
<!--                <td>-->
<!--                    <span class="iconfont size text-success">&#xe62c;</span>-->
<!--                </td>-->
<!--                <td>-->
<!--                    <button class="btn btn-sm btn-danger">下架</button>-->
<!--                    <button class="btn btn-sm btn-default">营销信息</button>-->
<!--                    <button class="btn btn-sm btn-default">内容管理</button>-->
<!--                </td>-->
<!--            </tr>-->
<!--            </tr>-->
<!--            <tr>-->
<!--                <td>3</td>-->
<!--                <td>如何高效准备简历和面试</td>-->
<!--                <td>￥68</td>-->
<!--                <td>3</td>-->
<!--                <td>-->
<!--                    <span class="iconfont size text-success">&#xe62c;</span>-->
<!--                </td>-->
<!--                <td>-->
<!--                    <button class="btn btn-sm btn-danger">下架</button>-->
<!--                    <button class="btn btn-sm btn-default">营销信息</button>-->
<!--                    <button class="btn btn-sm btn-default">内容管理</button>-->
<!--                </td>-->
<!--            </tr>-->
<!--            </tr>-->
<!--            <tr>-->
<!--                <td>4</td>-->
<!--                <td>高性能MySQL实战打发打发</td>-->
<!--                <td>￥999</td>-->
<!--                <td>4</td>-->
<!--                <td>-->
<!--                    <span class="iconfont size text-success">&#xe62c;</span>-->
<!--                </td>-->
<!--                <td>-->
<!--                    <button class="btn btn-sm btn-danger">下架</button>-->
<!--                    <button class="btn btn-sm btn-default">营销信息</button>-->
<!--                    <button class="btn btn-sm btn-default">内容管理</button>-->
<!--                </td>-->
<!--            </tr>-->
            </tbody>
        </table>
    </div>
</div>
</body>

</thml>



<style>
    .container{
        background: #f7f7f7;
    }
    #box{
        padding: 20px 0 20px 0;
    }
    .table>tbody>tr>td{
        vertical-align:middle;
    }
    .table>thead>tr>th{
        text-align: center
    }
    .header{
        margin-top: 40px;
        background: white;
    }
    .size {
        font-size: 10px;
    }
</style>


<script>
    //要先等页面加载完成 再去获取dom节点
    $(function (){
        $.ajax({
            url: "http://localhost:8080/week02_war_exploded/course",
            data:{
                methodName:"findCourseList",
            },
            success:function (res){
                // 前端JSON转对象
                var parse = JSON.parse(res);
                // console.log(res)

                console.log(parse)
                // forEach(function (每一项,下标值,原数组){})-
                parse.forEach(function (item){
                    $("tbody").append(` <tr>
                    <td>${item.id}</td>
                    <td>${item.course_name}</td>
                    <td>${item.sort_num}</td>
                    <td>${item.status}</td>
                    <td>
                    <span class="iconfont size text-success">&#xe62c;</span>
                    </td>
                    <td>
                        <button class="btn btn-sm btn-danger">下架</button>
                        <button class="btn btn-sm btn-default">营销信息</button>
                        <button class="btn btn-sm btn-default">内容管理</button>
                    </td>
                </tr>`)
                })
            },
            error:function (err){
                console.log(err)
            }
        })
    })
</script>
